﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        .txt_bg {
            background-color: #FFD553;
        }

        #app table tr td {
            border: 1px solid #000000;
            margin: 3px;
        }

        .clock {
            font-size: 8vw;
            font-weight: bold;
            color: #333;
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        body{
            background-color: #FFFFCC;
        }
        

        /* 修改提示消息样式，确保居中显示 */
        .notification {
            position: fixed;
            top: 10%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px 20px;
            border-radius: 5px;
            color: white;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 9999;
            opacity: 0;
            transition: all 0.3s ease;
            max-width: 300px;
            text-align: center;
        }

            .notification.show {
                opacity: 1;
            }

            .notification.success {
                background-color: #52c41a;
            }

            .notification.error {
                background-color: #ff4d4f;
            }
    </style>
</head>
<body>
    <div id="app">
        <!-- 添加提示消息容器 -->
        <div id="notification" class="notification"></div>

        <div>您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布登记</div>

        <form id="updateForm" method="post" action="/EMR_Add/Add">
            <div>
                <input type="submit" value="提交" />
            </div>
            <table>
                <tr>
                    <td class="txt_bg">机构</td>
                    <td width="150px" colspan="5">
                        <el-cascader v-model="selectedOrg"
                                     :options="orgOptions"
                                     :props="cascaderProps"
                                     placeholder="请选择I级机构"
                                     clearable
                                     v-on:change="handleOrgChange"
                                     class="w-full"
                                     style="width: 100%;">
                        </el-cascader>

                        <!-- 添加隐藏字段用于表单提交 -->
                        <input type="hidden" name="first_kind_id" :value="selectedOrg[0]">
                        <input type="hidden" name="first_kind_name" :value="firstKindName">
                        <input type="hidden" name="second_kind_id" :value="selectedOrg[1]">
                        <input type="hidden" name="second_kind_name" :value="secondKindName">
                        <input type="hidden" name="third_kind_id" :value="selectedOrg[2]">
                        <input type="hidden" name="third_kind_name" :value="thirdKindName">
                        <input type="hidden" name="major_kind_id" :value="valueZWName">
                        <input type="hidden" name="Deadline" :value="value1">@* 截至日期 *@
                        <input type="hidden" name="MajorKindName" :value="zwLabel">@* 职位名称 *@
                        <input type="hidden" name="EngageType" :value="valueZP">@* 招聘类型 *@
                        <input type="hidden" name="major_id" :value="valueZW">@* 职位分类 *@
                        <input type="hidden" name="major_name" :value="valueZWNameLabel">@* 职位分类 *@
                </td>

                    <td class="txt_bg" width="120px">招聘类型</td>
                    <td width="160px">
                        <el-select v-model="valueZP"
                                   placeholder="Select"
                                   size="large"
                                   style="width: 180px">
                            <el-option v-for="item in optionsZP"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value" />
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td class="txt_bg" width="180px">职位分类</td>
                    <td width="180px">
                        <el-select v-model="valueZW"
                                   placeholder="Select"
                                   size="large"
                                   style="width: 180px"
                                   v-on:change="handleZWChange">
                            <el-option v-for="item in optionsZW"
                                       :key="item.major_kind_id"
                                       :label="item.major_kind_name"
                                       :value="item.major_kind_id" />
                        </el-select>
                    </td>
                    <td class="txt_bg" width="150px">职位名称</td>
                    <td width="150px">
                        <el-select v-model="valueZWName"
                                   placeholder="Select"
                                   size="large"
                                   style="width: 180px"
                                   v-on:change="handleZWNameChange">
                            <el-option v-for="item in optionsMC"
                                       :key="item.major_id"
                                       :label="item.major_name"
                                       :value="item.major_id" />
                        </el-select>
                    </td>
                    <td class="txt_bg" width="120px">招聘人数</td>
                    <td width="150px"><input type="text" name="human_amount" /></td>
                    <td class="txt_bg" width="120px">截至日期</td>
                    <td width="180px">
                        <div class="block">
                            <input type="date" v-model="value1" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="txt_bg">登记人</td>
                    <td><input type="text" value="@Context.Session.GetString("PName")" name="Register" readonly></td>
                    <td class="txt_bg">登记时间</td>
                    <td><input type="text" v-model="tm" name="RegistTime" /></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="txt_bg">职位描述</td>
                    <td colspan="7"><textarea rows="3" name="MajorDescribe" cols="100"></textarea></td>
                </tr>
                <tr>
                    <td class="txt_bg">招聘要求</td>
                    <td colspan="7"><textarea rows="3" name="EngageRequired" cols="100"></textarea></td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        const { createApp, ref, onMounted } = Vue;

        const app = createApp({
          setup() {
              const value = ref([])
              const handleChange = (value) => {
                  console.log(value)
              }

              // 机构选择相关
              const selectedOrg = ref([]);  // 选中的机构ID数组
              const orgOptions = ref([]);   // 级联选择器的选项数据
              const firstKindName = ref('');  // I级机构名称
              const secondKindName = ref('');  // II级机构名称
              const thirdKindName = ref('');  // III级机构名称
              const valueZP = ref('')//  下拉框选择的招聘类型
              const valueZW = ref('')//  下拉框选择的职位分类
              const valueZWName = ref('')//  下拉框选择的职位名称
              const valueZWNameLabel = ref('')//  下拉框选择的职位名称的label

              // 级联选择器配置
              const cascaderProps = ref({
                  expandTrigger: 'click',
                  value: 'id',
                  label: 'name',
                  children: 'children',
                  checkStrictly: false
              });

              // 获取机构数据
              const fetchOrgData = async () => {
                  try {
                      const response = await axios.get('/FirstLevel1');
                      orgOptions.value = response.data;
                  } catch (error) {
                      console.error('获取机构数据失败:', error);
                      ElMessage.error('获取机构数据失败，请重试');
                  }
              };

              // 处理级联选择变化
              const handleOrgChange = (value) => {
                  console.log('选中的机构ID:', value);

                  // 清空名称
                  firstKindName.value = '';
                  secondKindName.value = '';
                  thirdKindName.value = '';

                  const firstId = value[0];
                  const secondId = value[1];
                  const thirdId = value[2];

                  // 获取I级名称
                  if (firstId) {
                      const firstItem = orgOptions.value.find(item => item.id === firstId);
                      firstKindName.value = firstItem?.name || '';
                      console.log("I级机构名称: " + firstKindName.value);
                  }

                  // 获取II级名称
                  if (firstId && secondId) {
                      const firstItem = orgOptions.value.find(item => item.id === firstId);
                      if (firstItem && firstItem.children) {
                          const secondItem = firstItem.children.find(item => item.id === secondId);
                          secondKindName.value = secondItem?.name || '';
                          console.log("II级机构名称: " + secondKindName.value);
                      }
                  }

                  // 获取III级名称
                  if (firstId && secondId && thirdId) {
                      const firstItem = orgOptions.value.find(item => item.id === firstId);
                      if (firstItem && firstItem.children) {
                          const secondItem = firstItem.children.find(item => item.id === secondId);
                          if (secondItem && secondItem.children) {
                              const thirdItem = secondItem.children.find(item => item.id === thirdId);
                              thirdKindName.value = thirdItem?.name || '';
                              console.log("III级机构名称: " + thirdKindName.value);
                          }
                      }
                  }
              };

              const optionsZP =[
                  {
                      value:"校园招聘",
                      label:"校园招聘"
                  },
                  {
                      value:"社会招聘",
                      label:"社会招聘"
                  }
              ]

              const optionsZW = ref([]);
              function ZWFL(){
                  axios.get("/EMR_Add/select")
                  .then(res=>{
                      console.log(res.data.list)
                      optionsZW.value = res.data.list
                  }).catch(err=>{
                      console.info(err)
                  })
              }
              ZWFL()

              const optionsMC = ref([]);
              function ZWMC(){
                  
              }

              

              // 页面加载时初始化
              onMounted(() => {
                  fetchOrgData();

                  // 检查是否有提示消息并显示
                  checkAndShowNotification();
              });
              const tm = ref('')
              //当前时间
              function updateTime() {
                const now = new Date();

                // 格式化日期时间
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');
                tm.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
              }

        // 立即更新一次时间
        updateTime();
        // 每秒更新一次
        setInterval(updateTime, 1000);

        //获取职位编号
        const zwLabel = ref('');
        const handleZWChange = (value) => {
            valueZWName.value = "";
            // 找到选中值对应的选项
        const selectedItem = optionsZW.value.find(item => item.major_kind_id === value);
            if (selectedItem) {
                zwLabel.value = selectedItem.major_kind_name;
                axios.get("/EMR_Add/selectById",{
                      params:{
                            id:value
                        }
                  })
                  .then(res=>{
                      console.log(res.data.list)
                      optionsMC.value = res.data.list
                  }).catch(err=>{
                      console.info(err)
                  })
                console.log('选中的职位分类ID:', value);
                console.log('选中的职位分类名称:', zwLabel.value);
            }
        };

        
        // 处理职位名称选择变化
        const handleZWNameChange = (value) => {
            // 找到选中值对应的选项
            const selectedItem = optionsMC.value.find(item => item.major_id === value);
            if (selectedItem) {
                valueZWNameLabel.value = selectedItem.major_name;
                console.log('选中的职位名称ID:', value);
                console.log('选中的职位名称:', valueZWNameLabel.value);
            }
        };

        const value1 =ref('');

        // 显示提示消息的函数
        const showNotification = (message, type) => {
            const notification = document.getElementById('notification');
            notification.textContent = message;

            // 设置消息类型样式
            if (type === 'success') {
                notification.className = 'notification show success';
            } else {
                notification.className = 'notification show error';
            }

            // 3秒后隐藏消息
            setTimeout(() => {
                notification.className = 'notification';
            }, 3000);
        };

        // 检查并显示从服务器传来的提示消息
        const checkAndShowNotification = () => {
            // 检查URL参数中是否有消息
            const urlParams = new URLSearchParams(window.location.search);
            const successMsg = urlParams.get('success');
            const errorMsg = urlParams.get('error');

            if (successMsg) {
                showNotification(successMsg, 'success');
            } else if (errorMsg) {
                showNotification(errorMsg, 'error');
            }
        };

              return {
                value,
                handleChange,
                selectedOrg,
                orgOptions,
                cascaderProps,
                handleOrgChange,
                firstKindName,
                secondKindName,
                thirdKindName,
                valueZP,
                valueZW,
                valueZWName,
                valueZWNameLabel, // 新增：职位名称的label
                optionsZP,
                optionsZW,
                optionsMC,
                tm,
                zwLabel,
                handleZWChange,
                handleZWNameChange, // 新增：职位名称选择变化的处理函数
                value1,
                showNotification,
                ZWMC
              }
          }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>
